import { useState, useImperativeHandle } from "react";

import { useSelector } from "react-redux";
import FilterItem from "./FilterItem";
import RadioGroup from "@/components/RadioGroup";
import DatePicker from "@/components/DatePicker";
import NumberField from "@/components/NumnerField";

// flushSync
const FilterForm = ({ ref }) => {
  const dictInfo = useSelector((state: any) => state.dict);
  const filterInfo = useSelector((state: any) => state.filter);

  const [gender, setGender] = useState<number | null>(filterInfo?.gender || null);
  const [status, setStatus] = useState<number | null>(filterInfo?.status || null);
  const [memberState, setMemberState] = useState<number | null>(null);
  const [register, setRegister] = useState<number | null>(null);
  const [birthday, setBirthday] = useState<any[]>([]);
  const [lastConsumDate, setLastConsumDate] = useState<any[]>([]);
  const [registerTime, setRegisterTime] = useState<any[]>([]);
  const [consumMoney, setConsumMoney] = useState<any[]>([]);
  const [consumTimes, setConsumTimes] = useState<any[]>([]);

  const collectValues = () => {
    return {
      gender,
      status,
      memberState,
      register,
      birthday,
      lastConsumDate,
      registerTime,
      consumMoney,
      consumTimes,
    };
  };

  useImperativeHandle(
    ref,
    () => ({
      collectValues,
    })
  );

  return (
    <div className="overflow-y-auto h-full">
      <FilterItem filterTitle="性别">
        <RadioGroup
          value={gender}
          onChange={(value) => setGender(value)}
          actions={dictInfo.dataGender}
        ></RadioGroup>
      </FilterItem>
      <FilterItem filterTitle="生日">
        <DatePicker
          value={birthday}
          onChange={(value) => {
            setBirthday(value);
          }}
        ></DatePicker>
      </FilterItem>
      <FilterItem filterTitle="注册来源">
        <RadioGroup
          value={register}
          onChange={(value) => setRegister(value)}
          actions={dictInfo.dataRegister}
        ></RadioGroup>
      </FilterItem>
      <FilterItem filterTitle="注册时间">
        <DatePicker
          value={registerTime}
          onChange={(value) => {
            setRegisterTime(value);
          }}
        ></DatePicker>
      </FilterItem>
      <FilterItem filterTitle="会员状态">
        <RadioGroup
          value={memberState}
          onChange={(value) => setMemberState(value)}
          actions={dictInfo.memberState}
        ></RadioGroup>
      </FilterItem>
      <FilterItem filterTitle="累计消费金额">
        <NumberField
          value={consumMoney}
          onChange={(value) => setConsumMoney(value)}
        ></NumberField>
      </FilterItem>
      <FilterItem filterTitle="累计消费次数">
        <NumberField
          integer
          value={consumTimes}
          onChange={(value) => setConsumTimes(value)}
        ></NumberField>
      </FilterItem>
      <FilterItem filterTitle="最近消费日期">
        <DatePicker
          value={lastConsumDate}
          onChange={(value) => {
            setLastConsumDate(value);
          }}
        ></DatePicker>
      </FilterItem>
      <FilterItem filterTitle="微信状态">
        <RadioGroup
          value={status}
          onChange={(value) => setStatus(value)}
          actions={dictInfo.memberState}
        ></RadioGroup>
      </FilterItem>
    </div>
  );
};

export default FilterForm;
